<template>
  <div
    class="my-navbar"
    :style="{top: Top + 'px',height:Height+'px',lineHeight: LineHeight+'px'}"
    @touchmove.prevent
  >
    <div class="my-navbar-btn" @click="backLink">
      <img src="http://data.youxiu.info/yidianBook/icon/back.png" alt />
      <span>我的图书</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Top: 0,
      Height: 0,
      LineHeight: 0
    };
  },
  created() {
    //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点
    let menuBtnObj = wx.getMenuButtonBoundingClientRect();
    this.Top = menuBtnObj.top;
    this.Height = menuBtnObj.height;
    this.LineHeight = menuBtnObj.height;
  },
  mounted() {},
  methods: {
    backLink() {
      wx.navigateBack({ delta: 1 });
    }
  }
};
</script>

<style>
.my-navbar {
  position: fixed;
  z-index: 999;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0 10px;
  border-radius: 40px;
  /* border:0.5px solid rgba(255, 255, 255, 0.2) */
  /* top: 50px; */
  /* height: 44px; */
  /* line-height: 44px; */
}
.my-navbar-btn {
  position: relative;
  top: -1px;
}
.my-navbar-btn img {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  border: none;
  vertical-align: middle;
  display: inline-block;
  /* position: relative; */
  /* top: -1px; */
}
.my-navbar-btn span {
  color: #ffffff;
  font-size: 14px;
  /* position: relative; */
  /* top: -3px; */
}
</style>